<template>
  <div class="app-container">

    <el-card class="card" :body-style="{ padding: '0px' }" >
      <div class="demo-image__placeholder">
        <div class="block">
          <el-upload
            class="avatar-uploader"
            :action="action"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleCheckImg1Success"
            :before-upload="beforeAvatarUpload">
            <img v-if="checkImg1Url" :src="checkImg1Url" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
      <div style="padding: 14px;">
        <span>检测结果1</span>
      </div>
    </el-card>

    <el-card class="card" :body-style="{ padding: '0px' }" >
      <div class="demo-image__placeholder">
        <div class="block">
          <el-upload
            class="avatar-uploader"
            :action="action"
            :headers="headers"
            :show-file-list="false"
            :on-success="handleCheckImg2Success"
            :before-upload="beforeAvatarUpload">
            <img v-if="checkImg2Url" :src="checkImg2Url" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>
      <div style="padding: 14px;">
        <span>检测结果2</span>
      </div>
    </el-card>
    <div class="clear"></div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" style="width: 60%" @click="submitClick">确 定上传</el-button>
    </div>

  </div>
</template>

<script>
  import {orderImgByOrderId,saveImg} from "@/api/order/img";
  import defaultSettings from '@/settings'
  import {mapGetters} from "vuex";
  export default {
    name: "OrderImg",
    props: {
      orderId: {
        type: Number
      }
    },
    data() {
      return {
        imgpre: defaultSettings.ossPreview,
        zindex:999,
        orderImg: {},
        action:process.env.VUE_APP_BASE_API + '/common/upload/oss',
        checkImg1Url: "",
        checkImg2Url: "",
      }
    },
    computed: {
      ...mapGetters(['token']),
      headers() {
        return{
          "Authorization": this.token // 直接从本地获取token就行
        }
      }
    },
    created() {
      this.getImg();
    },
    methods: {

      /** 完成按钮操作 */
      submitClick() {
        let that = this;
        if (!this.checkImg1Url || !this.checkImg2Url){
          this.$message.error('请上传签章。');
          return;
        }
        this.$confirm('是否确定上传？', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          that.orderImg.orderId = that.orderId;
          return saveImg(that.orderImg);
        }).then((res) => {
          that.getImg();
          that.msgSuccess(res.msg);
        }).catch(function (e) {
          console.log("异常了:" + e)
        });
      },

      /** 查询订单列表 */
      getImg() {
        this.loading = true;
        orderImgByOrderId(this.orderId).then(response => {
          console.log(response)
         this.orderImg = response.data || {};
          if (this.orderImg.checkImg1){
            this.checkImg1Url = this.imgpre + this.orderImg.checkImg1
          }
          if (this.orderImg.checkImg2){
            this.checkImg2Url = this.imgpre + this.orderImg.checkImg2
          }
        });
      },
      handleCheckImg1Success(res, file) {
        this.checkImg1Url = this.imgpre + res.imgUrl;
        this.orderImg.checkImg1 = res.imgUrl;
      },
      handleCheckImg2Success(res, file) {
        this.checkImg2Url = this.imgpre + res.imgUrl;
        this.orderImg.checkImg2 = res.imgUrl;
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (file.type.indexOf("image/") == -1) {
          this.$message.error('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。');
          return
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
          return
        }
      },

    }
  };
</script>
<style>
  .card {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .clear{clear:both;}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 300px;
    height: 300px;
    line-height: 300px;
    text-align: center;
  }
  .avatar {
    width: 300px;
    height: 300px;
    display: block;
  }
</style>
